<template>
  <div class="check-box" :class="[isChecked? 'check':'']" @click="colorClick">
    <img src="~assets/img/cart/tick.svg" />
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    isChecked: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  methods: {
    colorClick() {
      this.$emit('colorCheck')
    }
  }
}
</script>

<style scoped>
.check-box {
  display: flex;
  align-items: center;
}
.check-box img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid #eee;
}
.check img {
  background-color: var(--color-tint);
  color: var(--color-tint);
}
</style>
